<template>
  <view class="member-item" :style="{ background, width }" @click="emit('click')">
    <view class="member-item_avatar">
      <TImage :src="item?.avatar" vertical-align="baseline" width="65rpx" height="65rpx" error-img-type="person" />
    </view>
    <view class="member-item_info">
      <view class="info-name">
        <text class="text-overflow-1">
          {{ item?.name }}
        </text>
        <image class="icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-12.png" mode="scaleToFill" />
      </view>
      <view class="info-position text-overflow-1">
        <text>{{ item?.socialPosition }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { type IMemberItem } from '@/api/mine/types';
  import { type PropType } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { propTypes } from '@/utils/propTypes';

  defineProps({
    item: Object as PropType<IMemberItem>,
    background: propTypes.string.def('linear-gradient(180deg, #fff4dd 0%, #fffaf2 100%)'),
    width: {
      type: String as PropType<'332rpx' | 'max-content'>,
      default: '332rpx',
    },
  });

  const emit = defineEmits(['click']);
</script>

<style lang="scss" scoped>
  .member {
    &-item {
      height: 115rpx;
      border-radius: 10rpx;
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      &_avatar {
        width: 65rpx;
        height: 65rpx;
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #fff;
        margin-left: 20rpx;
        flex-shrink: 0;
      }
      &_info {
        color: #808080;
        font-size: 23rpx;
        margin-left: 13rpx;
        padding-right: 10rpx;
        .info-name {
          font-size: 27rpx;
          color: #333;
          display: flex;
          align-items: center;
          .icon {
            width: 38rpx;
            height: 25rpx;
            margin-left: 12rpx;
            flex-shrink: 0;
          }
        }
      }
    }
  }
</style>
